<template>
    <div>
        <div class="main-body" v-show="!newAreaShow" style="position: relative">
            <el-form
                ref="form"
                :model="form"
                :inline="true"
                class="form-body"
                size="mini"
            >
                <el-form-item label="区域名称">
                    <el-input
                        v-model="form.areaName"
                        size="small"
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
                <el-form-item label="人员名称">
                    <el-input
                        v-model="form.operName"
                        size="small"
                        placeholder="请输入"
                    ></el-input>
                </el-form-item>
                <el-form-item label="区域类型" class="main—class" prop="state">
                    <el-select
                        v-model="form.areaType"
                        placeholder="请选择"
                        class="main-state"
                    >
                        <el-option label="行政区域" value="1"></el-option>
                        <el-option label="自定义围栏" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button
                        type="primary"
                        @click="searchMethod"
                        size="small"
                        icon="el-icon-search"
                        >查询</el-button
                    >
                    <el-button
                        @click="reset"
                        size="small"
                        icon="el-icon-refresh-right"
                        >重置</el-button
                    >
                </el-form-item>
            </el-form>
            <div class="table-body" ref="tableRef">
                <el-table
                    :data="caseList"
                    style="
                        width: 100%;
                        overflow: auto;
                        padding: 0;
                        font-size: 13px;
                    "
                    :max-height="tableHe - 80"
                    :row-style="{ height: '40px' }"
                    :cell-style="{ padding: '0px' }"
                    :header-row-style="tableHeaderColor"
                    :header-cell-style="{
                        padding: '0px',
                        background: '#E1F1FF',
                    }"
                >
                    <div slot="empty" class="empty">
                        <span>暂无数据</span>
                    </div>
                    <af-table-column
                        :show-overflow-tooltip="true"
                        label="区域名称"
                        prop="userName"
                    >
                    </af-table-column>
                    <af-table-column
                        :show-overflow-tooltip="true"
                        label="区域类型"
                        prop="userMsisdn"
                    >
                    </af-table-column>
                    <af-table-column
                        :show-overflow-tooltip="true"
                        label="区域备注"
                        prop="userAcct"
                    >
                    </af-table-column>
                    <af-table-column
                        :show-overflow-tooltip="true"
                        label="关联人员数"
                        prop="duty"
                    >
                    </af-table-column>
                    <af-table-column
                        :show-overflow-tooltip="true"
                        width="150"
                        label="最新操作时间"
                        prop="groupNameList"
                    >
                    </af-table-column>
                    <af-table-column
                        :show-overflow-tooltip="true"
                        width="100"
                        label="操作人"
                        prop="modifyDate"
                    >
                    </af-table-column>
                    <af-table-column
                        :show-overflow-tooltip="true"
                        label="状态"
                        prop="modifyOperatorName"
                    >
                    </af-table-column>
                    <el-table-column label="操作" width="210">
                        <template slot-scope="scope">
                            <el-button type="text" @click="editorRow(scope.row)"
                                >关联人员</el-button
                            >
                            <el-button type="text" @click="deleteRow(scope.row)"
                                >区域修改</el-button
                            >
                            <el-button type="text" @click="deleteRow(scope.row)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <div
                    class="block"
                    style="
                        margin-top: 24px;
                        position: absolute;
                        bottom: 15px;
                        left: 50%;
                        transform: translateX(-50%);
                    "
                >
                    <el-pagination
                        @size-change="sizeClick"
                        @current-change="pageClick"
                        :current-page="pageNum"
                        :page-sizes="[10, 20, 30, 40, 50]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            form: {
                areaName: "",
                operName: "",
                areaType: "",
            },
            formAdd: {
                name: "",
                region: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
                city: "",
                county: "",
            },
            operNum: "",
            operPermissions: "",
            caseList: [],
            pageNum: "1",
            pageSize: "10",
            totalCount: 50,
            showPagination: true, //只有一页时隐藏分页
            tableHe: 1000,
            newOperFlag: false,
            updateOperFlag: false,
            operInfoObject: { userId: "" },
        };
    },
    computed: {},
    methods: {
        labelHead(h, { column, index }) {
            let l = column.label.length;
            let f = 15; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
            column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度
            //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
            return h("div", { class: "table-head", style: { width: "100%" } }, [
                column.label,
            ]);
        },
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "color: #4389D6;height: 40px;";
            }
        },
        searchMethod() {
            this.operatorSearchMethod();
        },
        reset() {
            this.$set(this.form, "areaName", "");
            this.$set(this.form, "operName", "");
            this.$set(this.form, "areaType", "");
            this.pageNum = "1";
            this.pageSize = "10";
            this.operatorSearchMethod();
        },
        pageClick(val) {
            this.pageNum = val;
            this.operatorSearchMethod();
        },
        sizeClick(val) {
            this.pageSize = val;
            this.operatorSearchMethod();
        },
        editorRow(item) {
            this.showOperFlag = true;
            this.newOperFlag = false;
            this.updateOperFlag = true;
            this.operInfoObject = item;
        },
        deleteRow(item) {
            console.log(item);
            let param = {
                userId: item.userId,
            };
            this.$http
                .post("/lbs/usercenter/operator/deleteOperator", param)
                .then((res) => {
                    if (res.data.retCode == "0") {
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                        this.operatorSearchMethod();
                    } else {
                        this.$message({
                            message: res.data.retMsg,
                            type: "error",
                        });
                    }
                });
        },
        //查询调用方法
        operatorSearchMethod() {
            let param = {
                userAcct: this.operCount,
                userMsisdn: this.operNum,
                userName: this.operName,
                duty: this.operPermissions,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            this.$http
                .post("/lbs/usercenter/operator/qryOperatorList", param)
                .then((res) => {
                    if (res.data.retCode == "0") {
                        this.caseList = res.data.pageData;
                        this.totalCount = parseInt(res.data.total);
                        this.caseList.forEach((item) => {
                            item.duty =
                                item.duty == "1" ? "集团管理员" : "集团操作员";
                            item.groupNameList = item.groupNameList.join(",");
                        });
                    } else {
                        this.$message({
                            message: res.data.retMsg,
                            type: "error",
                        });
                    }
                });
        },
    },
    mounted() {
        let obj = this.$refs.tableRef;
        this.tableHe = parseInt(window.getComputedStyle(obj).height);
        this.operatorSearchMethod();
    },
};
</script>

<style scoped lang="less">
.main-body {
    width: 1200px;
    height: 100%;
    border: 1px solid #e1e1e1;
}
.main-body .el-form /deep/ .el-form-item__label {
    font-size: 13px;
}
.table-body {
    margin-top: 55px;
    background: #fff;
    padding: 16px;
    position: absolute;
    width: 1200px;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border-bottom-right-radius: 15px;
}
.form-body {
    padding: 10px 20px 0;
    background: #fbfbfb;
    height: 50px;
    border-bottom: 0;
    border-top-right-radius: 15px;
}
.form-body.active {
    padding: 5px 20px 10px;
    background: #fbfbfb;
    height: 30px;
    border-bottom: 1px solid #e1e1e1;
    border-top-right-radius: 15px;
}
.pss-process {
    width: 100%;
    height: 60px;
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.pss-striping {
    width: 16%;
    height: 1px;
    background: #d1d1d1;
}
.pss-striping.blue {
    background: #007aff;
}
.el-icon-location.active {
    background: #007aff;
    font-size: 16px;
    padding: 4px;
    color: #fff;
    border-radius: 15px;
    margin-left: 5px;
}
.el-icon-check.active {
    background: #30b86b;
    font-size: 16px;
    padding: 4px;
    color: #fff;
    border-radius: 15px;
    margin-left: 5px;
    font-weight: 600;
}
.pss-icon-circle.active {
    background: #fff;
    height: 10px;
    width: 10px;
    border: 7px solid #d3d3d3;
    border-radius: 15px;
    margin-left: 5px;
}
.pss-process-txt {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
}
.pss-base-info {
    font-size: 12px;
    color: #656565;
}
.pss-plan-form {
    padding: 0px 30px 7px;
}
.pss-plan-form-active {
    padding: 0px 30px 7px;
}
.associates-box {
    height: 300px;
    width: 500px;
    margin: 20px 90px;
    background: #f7f7f7;
    overflow: auto;
    padding: 25px;
    box-sizing: border-box;
}
.form-label-name {
    font-size: 14px;
    line-height: 41px;
    padding-right: 7px;
    color: #606266;
}

</style>
<style lang="less">
.pss-main {
    .el-input__inner {
        height: 24px;
        line-height: 24px;
    }
    .el-input {
        width: auto;
    }
    .pss-demonstration {
        font-size: 14px;
        color: #606266;
    }
    .el-date-editor .el-range__icon {
        line-height: 16px;
    }
    .el-date-editor .el-range-input,
    .el-date-editor .el-range-separator {
        font-size: 12px;
    }
    .el-date-editor .el-range-separator {
        line-height: 16px;
    }
    .el-date-editor .el-range__close-icon {
        line-height: 16px;
    }
    .el-date-editor--daterange.el-input,
    .el-date-editor--daterange.el-input__inner,
    .el-date-editor--timerange.el-input,
    .el-date-editor--timerange.el-input__inner {
        width: 220px;
    }
    .el-form-item {
        margin-bottom: 0;
    }
    .el-radio-button__inner {
        padding: 2px 5px;
        font-size: 12px;
    }
    .el-checkbox {
        margin-right: 15px;
    }
    .el-tree {
        background: none;
    }
}
.pss-plan-form-active {
    .el-form-item__content {
        line-height: 25px;
    }
}
</style>
<style lang="less">
.main-body {
    .el-button--text {
        padding: 5px 0;
    }
    .el-input--small .el-input__inner {
        height: 28px;
        line-height: 28px;
    }
    .el-input--small .el-input__icon {
        line-height: 28px;
    }
    .el-button--small,
    .el-button--small.is-round {
        padding: 7px 15px;
    }
    .el-button--small,
    .el-button--small {
        border-radius: 6px;
    }
}
</style>
